<template>
<div class="news">
      <h3 class="title">
        最新音乐
      </h3>
      <div class="items">
        <div class="item" v-for="(item,index) in newslist" :key="index" >
          <div class="img-wrap">
            <img :src="item.picUrl" alt="" />
          <!--   播放按钮 -->
            <span class="iconfont icon-play" @click="player(item.id)" ></span>
          </div>
          <div class="song-wrap">
            <div class="song-name">{{item.name}}</div>
            <div class="singer">{{item.song.artists[0].name}}</div>
          </div>
        </div>
      </div>
    </div>  
</template>
<script>
import axios from 'axios'
export default {
  name:'news',
  data() {
    return {
      newslist:[]
      
    }
  },
  created(){
    axios({
      url:'https://autumnfish.cn/personalized/newsong',
      method:'get',
    }).then(res=>{
     /*  console.log(res)  */
      this.newslist=res.data. result    
    })
  },
  methods:{
    player(id){
      axios({
        url:'https://autumnfish.cn/song/url',
        method:'get',
        params:{
          id
        }
      }).then(res=>{
       /*  console.log(res) */
        let playerUrl=res.data.data[0].url
       /*  console.log(this.$parent.$parent.musicUrl) */
        /* 获取到的url设置给父组件播放组件的url */
       this.$store.state.musicUrl=playerUrl
      })
    }
  }
}
</script>

<style>

</style>